import React, {PropsWithChildren, RefObject, useCallback, useEffect, useRef, useState} from "react"
import {Button, Form, Input, InputProps, InputRef, Popover, Space} from "antd";
import {InternalFieldProps} from "rc-field-form/lib/Field";
import LoadableButton from "./LoadableButton";

interface SingleInputPopoverProps {
    title: string
    onConfirm: (value:string)  => Promise<void>
    rules?: InternalFieldProps["rules"]
    fieldName:string
    placeholder?:string
    customInput?: (props:InputProps,ref:RefObject<InputRef>) => React.ReactNode
    initialValue?: string
    required?:boolean
}

const SingleInputPopover: React.FC<PropsWithChildren<SingleInputPopoverProps>> = ({
                                                                                      onConfirm,
                                                                                      rules,
                                                                                      title,
                                                                                      children,
                                                                                      placeholder,
                                                                                      fieldName,
    initialValue,
                                                                                      required,
    customInput
                                                                                  }) => {
    useEffect(() => {
        form.setFieldValue("value",initialValue)
    }, [initialValue]);
    const [loading,setLoading] = useState(false)
    let [form] = Form.useForm();
    const inputRef = useRef<InputRef>(null);
    const [open,setOpen] = useState(false)
    useEffect(() => {
        if (open){
            setTimeout(()=>{
                inputRef.current?.focus()
            },50)
        }
    }, [open,form]);
    const inputProps:InputProps ={
        autoFocus:true,
        placeholder: placeholder??fieldName
    }

    const doConfirm = useCallback(async ()=>{
        if (!loading){
            setLoading(true)
            await onConfirm(form.getFieldValue("value")).then(()=>{
                setOpen(false)
            }).finally(()=>{
                setLoading(false)
            })
        }
    },[loading,onConfirm])
    return (
        <span onClick={event => event.stopPropagation()}>
            <Popover open={open} trigger={"click"} title={title} onOpenChange={visible => setOpen(visible)} content={
                <Form onFinish={doConfirm} autoComplete={"off"} form={form}>
                    <Form.Item name={"value"} label={fieldName} rules={[...(required?[{required:true,message:`请输入${fieldName}`}]:[]),...rules??[]]}>
                        {customInput?customInput(inputProps,inputRef):<Input ref={inputRef} {...inputProps}/>}
                    </Form.Item>
                    <Form.Item>
                        <div style={{display:"flex",justifyContent:"end"}}>
                            <Space>
                                <Button loading={loading} onClick={()=>{
                                    setOpen(false)
                                }}>取消</Button>
                                <LoadableButton type={"primary"} onClick={doConfirm}>确定</LoadableButton>
                            </Space>
                        </div>
                    </Form.Item>
                </Form>
            }>
                {children}
            </Popover>
        </span>
    )
}

export default SingleInputPopover
